<template>
<Card>
    <p slot="title">
        <Breadcrumb>
            <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
            <BreadcrumbItem to="/product/list"><Icon type="ios-list"></Icon> 商品管理</BreadcrumbItem>
            <BreadcrumbItem to="/product/list"><Icon type="ios-copy-outline"></Icon> 商品列表</BreadcrumbItem>
        </Breadcrumb>
    </p>
    <Form class="step-form" ref="searchForm" :model="searchForm" :rules="searchFormRules" :label-width="100">
        <Row>
            <Col span="6">
            <FormItem label="商品类型：" prop="cate_id">
                <Select v-model="searchForm.cate_id">
                    <Option v-for="item in cateList" :value="item.cate_id" :key="item.cate_id">{{ item.cate_title }}</Option>
                </Select>
            </FormItem>
            </Col>
            <Col span="6">
            <FormItem label="上架状态：" prop="is_show">
                <Select v-model="searchForm.is_show">
                    <Option value="1">上架</Option>
                    <Option value="0">下架</Option>
                </Select>
            </FormItem>
            </Col>
            <Col span="7">
            <Row>
                <Col span="12">
                <FormItem label="添加时间：" prop="date_s">
                    <DatePicker :disabled="hasSubmit" type="date" placeholder="开始时间" prop="date_s" v-model="searchForm.date_s"></DatePicker>
                </FormItem>

                </Col>
                <Col span="1" style="text-align: center">-</Col>
                <Col span="7">
                <FormItem :label-width="1" prop="date_e">
                    <DatePicker :disabled="hasSubmit" type="date" placeholder="结束时间" prop="date_e" v-model="searchForm.date_e"></DatePicker>
                </FormItem>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row>
            <Row>
                <Col span="6">
                <FormItem label="商品名称：" prop="product_name">
                    <Input :disabled="hasSubmit" v-model="searchForm.product_name" placeholder="输入名称"></Input>
                </FormItem>
                </Col>
                <Col span="6">
                <FormItem label="商品ID：" prop="product_id">
                    <Input :disabled="hasSubmit" v-model="searchForm.product_id" placeholder="输入ID"></Input>
                </FormItem>
                </Col>
                <Col span="12">
                <FormItem>
                    <Button type="primary" :disabled="hasSubmit" @click="handleSubmit('searchForm')" icon="search">查询</Button>
                    <Button type="ghost" @click="handleReset('searchForm')" style="margin-left: 8px">重置</Button>
                    <Button type="success" @click="handleToEditPage()" style="float: right">商品录入</Button>
                </FormItem>
                </Col>
            </Row>
        </Row>
    </Form>
    <ButtonGroup v-if="this.tableSelects.length>0">
        <Poptip
                confirm
                title="确认全部隐藏吗？"
                @on-ok="handeHide(1)"
                >
            <Button>全部隐藏</Button>
        </Poptip>
        <Poptip
                confirm
                title="确认全部显示吗？"
                @on-ok="handeHide(0)"
                >
            <Button>全部显示</Button>
        </Poptip>
    </ButtonGroup>
    <Table
        border
        ref="selection"
        :columns="columns"
        :data="list"
        :loading="loading"
        @on-selection-change="this.selectRow"
    ></Table>
    <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page
            :total="total"
            :current="current"
            :page-size="pageSize"
            :show-elevator="true"
            :page-size-opts="[12, 20, 30, 40]"
            :show-sizer="true"
            @on-change="changePage"
            @on-page-size-change="changePageSize"
            ></Page>
        </div>
    </div>
</Card>
</template>
<script>
import Util from '../../libs/util';
import moment from 'moment';

export default {
    data () {
        return {
            columns: [
                // {
                //     type: 'selection',
                //     key: 'id',
                //     width: 60,
                //     align: 'center'
                // },
                {
                    title: 'ID',
                    align: 'center',
                    width: 60,
                    key: 'product_id'
                },
                {
                    title: '封面图',
                    key: 'cover_img',
                    render: (h, params) => {
                        return h('Avatar', {
                            attrs: {
                                src: params.row.cover_img
                            }
                        });
                    }
                },
                {
                    title: '名称',
                    ellipsis: true,
                    key: 'product_name'
                },
                {
                    title: '商品类型',
                    key: 'cate_title'
                },
                {
                    title: '单价',
                    key: 'unit_point'
                },
                {
                    title: '销量',
                    key: 'sale_num'
                },
                {
                    title: '库存',
                    key: 'stock_num'
                },
                {
                    title: '是否上架',
                    key: 'is_show',
                    render: (h, params) => {
                        const color = params.row.is_show==0? 'red': 'green';
                        const text = params.row.is_show==0? '下架': '上架';
                        return h('Tag', {
                            props: {
                                type: 'dot',
                                color: color
                            }
                        }, text);
                    }
                },
                {
                    title: '是否热销',
                    key: 'is_hot',
                    render: (h, params) => {
                        const color = params.row.is_hot == 0 ? 'red' : 'green';
                        const text = params.row.is_hot == 0 ? '否' : '是';
                        return h('Tag', {
                            props: {
                                type: 'dot',
                                color: color
                            }
                        }, text);
                    }
                },
                {
                    title: '添加时间',
                    key: 'create_time',
                    render: (h, params) => {
                        return h('div', Util.formatDate(params.row.create_time));
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        const text = params.row.is_show==0? '上架': '下架';
                        return h('div', [
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                            }, [
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: '确定要' + text + '吗！',
                                        size: 'small'
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.handleShow(params.row.product_id, params.row.is_show);
                                        }
                                    }
                                }, text)
                            ]),
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params.row.product_id);
                                    }
                                }
                            }, '详情'),
                            h('Button', {
                                props: {
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.handleToEditPage(params.row.product_id);
                                    }
                                }
                            }, '修改')
                        ]);
                    }
                }
            ],
            list: [],
            total: 0,
            current: this.$route.params.page ? this.$route.params.page : 1,
            pageSize: 12,
            loading: true,
            searchForm: {
                cate_id: [],
                is_show: '',
                date_s: '',
                date_e: '',
                product_name: '',
                product_id: ''
            },
            searchFormRules: {
            },
            hasSubmit: false,
            tableSelects: [],
            cateList: []
        };
    },
    mounted: function () {
        this.$nextTick(function () {
            const $params = {page: this.current};
            this.getList($params);
            this.getCatelist();
        });
    },
    methods: {
        getList: function (params) {
            Util.ajax.post(`/adminapi/product/list`, params).then(response => {
                this.list = response.data.data.list;
                this.total = response.data.data.total;
                this.current = response.data.data.current;
                this.pageSize = response.data.data.pageSize;
                this.loading = false;
                this.hasSubmit = false;
            });
            // this.searchBrnLoading = false;
        },
        selectRow (selection, row) {
            this.tableSelects = selection;
        },
        handeHide (hideVal) {
            let ids = [];
            this.tableSelects.map(function (v, i) {
                ids[i] = v.article_id;
            })
            const params = {article_id: ids, is_hide: hideVal};
            Util.ajax.post(`/adminapi/product/edit`, params).then(response => {
                if(response.data.errCode==0) {
                    const params = {page: this.current, pageSize: this.pageSize};
                    this.getList(params);
                    this.$Message.success('操作成功');
                }else {
                    this.$Message.error('操作失败');
                }
            });
        },
        show (product_id) {
            window.open("/#/mallDetails?p_id=" + product_id);
            // this.$Modal.info({
            //     title: '详情',
            //     scrollable: true,
            //     closable: true,
            //     width: 700,
            //     content: `<strong>平台</strong>：${this.list[index].name}<br><strong>内容</strong>：<div>${this.list[index].content}</div><br><strong>交易类型</strong>：${this.list[index].cate_str}`
            // });
        },
        remove (index) {
            this.data6.splice(index, 1);
        },
        formatDate (datetime) {
            const date =  new Date(parseInt(datetime) * 1000);
            const y = date.getFullYear();
            let m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
        },
        changePage (e) {
            this.loading = true;
            const params = {page: e, pageSize: this.pageSize};
            this.list = this.getList(params);
        },
        changePageSize (e) {
            this.loading = true;
            const params = {page: 1, pageSize: e};
            this.list = this.getList(params);
        },
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.hasSubmit = true;
                    let params = {
                        ...this.searchForm,
                        page: 1,
                        pageSize: this.pageSize
                    };
                    params.date_s = params.date_s? moment(params.date_s).format('X'): '';
                    params.date_e = params.date_e? moment(params.date_e).subtract(-1, "days").format('X'): '';
                    this.getList(params);
                }
            });
        },
        handleReset (name) {
            this.$refs[name].resetFields();
            this.searchForm.cate_id = [];
            this.hasSubmit = false;
            this.getList();
        },
        handleToEditPage (product_id) {
            let params = { product_id: product_id, page: this.current };
            this.$router.push({
                name: 'product_edit',
                params: params
            });
        },
        handleShow (product_id, is_show) {
            let show = is_show == 1? 0: 1;
            Util.ajax.post(`/adminapi/product/edit`, {product_id: product_id, is_show: show}).then(response => {
                if(response.data.code == 0) {
                    this.$Message.success('操作成功');
                    this.getList();
                }else {
                    this.$Message.error('操作失败');
                }
            });
        },
        getCatelist () {
            Util.ajax.post(`/adminapi/product/catelist`, { pageSize: 100 }).then(response => {
                this.cateList = response.data.data.list;
            });
        }
    }
};
</script>
